// function Sprite(archivoImagenes, anchoSprite, altoSprite, numFrames, desfaseFrameRelativo, velocidadPixeles, posXIni, posYIni) {
function Sprite(archivoImagenes, anchoSprite, altoSprite, numFrames, velocidadPixeles, posXIni, posYIni) {	
	this.imagen = new Image();
	this.is_ready = false;
	var that = this;
	this.imagen.onload = function(){ 
		that.is_ready = true;
	}
	this.imagen.src = archivoImagenes;
	this.anchoSprite = anchoSprite;
	this.altoSprite = altoSprite;
	this.numFrames = numFrames;
	// this.desfaseFrameRelativo = desfaseFrameRelativo;
	this.velocidadPixeles = velocidadPixeles;
	//
	this.incrementoFrame = 1;
	this.frame = 0;
	this.paso = 0;
	this.posX = posXIni;
	this.posY = posYIni;
	this.filaSprite = 0; // Izq;
	
	this.actualizarEstado = function() {
		if (teclaPulsada == SIN_TECLA) {
			this.frame = this.numFrames;
			this.filaSprite = 0;
			this.paso = 0;
		}
		else {
			if (teclaPulsada == IZQUIERDA) {
				this.filaSprite = 0;
				this.posX = this.posX - this.velocidadPixeles;
				if (this.posX < -this.anchoSprite)
					this.posX = 800;
			}
			else if (teclaPulsada == DERECHA) {
				this.filaSprite = 1;
				this.posX = this.posX + this.velocidadPixeles;
				if (this.posX > 800)
					this.posX = 0;
			}
			if (this.frame == this.numFrames)
				this.frame = 0;
			this.paso = (this.paso + 1)% 3;
			if (this.paso == 0)
				this.frame = this.frame + this.incrementoFrame;
			if (this.frame == this.numFrames - 1)
				this.incrementoFrame = -1;
			if (this.frame < 1) 
				this.incrementoFrame = 1;
			/* if (this.paso == 0 && desfaseFrameRelativo)
				this.posX = this.posX + desfaseFrameRelativo[this.frame];
			*/
		}
					
	}
	
	this.drawImage = function(contexto) {
		if(this.is_ready){
			contexto.clearRect(Math.max(0, this.posX-20), this.posY, Math.max(this.anchoSprite, this.posX + 20 + this.anchoSprite), this.altoSprite);
			if (this.filaSprite == 0)
				contexto.drawImage(this.imagen, this.frame * this.anchoSprite, 0, this.anchoSprite, this.altoSprite, this.posX, this.posY, this.anchoSprite, this.altoSprite);
			else
				contexto.drawImage(this.imagen, this.frame * this.anchoSprite, this.altoSprite + 1, this.anchoSprite, this.altoSprite, this.posX, this.posY, this.anchoSprite, this.altoSprite);
		}
	}	
}


function Principal(pcanvas) {
	this.canvas = pcanvas;
	this.contexto = pcanvas.getContext("2d");
	this.ancho = pcanvas.width;
	this.alto = pcanvas.height;
	// this.sprite = new Sprite("imagenes/mapa.png", 64, 121, 6, [0, 2, -3, -2, -1, 4], 4, 400, 270);
	// this.sprite = new Sprite("imagenes/mapa.png", 64, 121, 6, null, 4, 400, 270);
	this.sprite = new Sprite("imagenes/mapa.png", 64, 121, 6, 4, 400, 270);
		
	this.actualizarJuego = function() {
		this.sprite.actualizarEstado();
		this.drawFrame();
	}
	
	this.drawFrame = function(){
		//this.contexto.clearRect(0,0,this.ancho,this.alto);
		this.sprite.drawImage(this.contexto);
	}
}

window.onload = function() {
	var principal = new Principal(document.getElementById("canvasMov"));
	setInterval(function(){principal.actualizarJuego()}, 33);
}
